﻿<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount">0</span></h2>
        <ol id="todolist" class="demo-box">
            <!-- <li>
                <input type='checkbox'>
                <p>吃饭</p>
                <a href='javascript:;'></a>
            </li>
            <li>
                <input type='checkbox'>
                <p>打豆豆</p>
                <a href='javascript:;'></a>
            </li> -->
        </ol>
        <h2>已经完成 <span id="donecount">0</span></h2>
        <ul id="donelist">
            <!-- <li>
                <input type='checkbox' checked>
                <p>睡觉</p>
                <a href='javascript:;'></a>
            </li> -->
        </ul>
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn
    </footer>

    <script>
        // 任务列表
        let todolist = [
            // content 任务内容
            // done   任务是否已完成  true 已完成    false 正在进行中
            { content: "敲JS基础代码", done: true },
            { content: "敲webApis代码", done: true },
            { content: "敲JS进阶代码", done: false },
            { content: "练习Echarts图表代码", done: false },
            { content: "预习Ajax课程", done: false },
        ]


        // 功能列表
        // 1. 渲染数据功能 (包含 统计任务数量)
        // 2. 回车发布功能（最新的在最上面）
        // 3. 删除操作
        // 4. 切换任务的完成状态
        // 5. 本地存储 与 读取本地存储的数据
        //     啥时候存（添加、删除、切换任务完成状态）

        // 技术要求
        //  1. 通过jQ语法来获取元素 + 注册事件 + 注册事件委托（on语法）
        //          不使用原生JS获取元素 和 注册事件
        //  2. 渲染数据功能，需要使用 map + join 配合实现功能
        //  3. 尽可能的使用ES6语法
        //          比如 箭头函数 、 对象属性和方法简写、数组常用方法（filter）


        // 功能1. 渲染数据功能 (包含 统计任务数量)

        //封装函数
        // JSON.parse(localStorage.getItem(`str`))
        // JSON.parse(localStorage.getItem(`new`))
        const falseArr = JSON.parse(localStorage.getItem(`str`))|| todolist.filter(function (ele) {
            return ele.done === false
        })
        const trueArr =JSON.parse(localStorage.getItem(`new`))|| todolist.filter(function (ele) {
            return ele.done === true
        })


        //获取到正在进行和已经完成
        const todocount = document.querySelector(`#todocount`)
        const donecount = document.querySelector(`#donecount`)
        const todoList = document.querySelector(`#todolist`)
        const doneList = document.querySelector(`#donelist`)


        function render() {
            //渲染的是正在进行的功能
            const strArr = falseArr.map(function (e, index) {
                return `
                <li>
                <input type='checkbox' data-id=${index}>
                <p>${e.content}</p>
                <a href='javascript:;' data-id=${index}></a>
                </li>
             `
            })

            document.querySelector(`#todolist`).innerHTML = strArr.join(``)



            //渲染的是已经完成的功能

            const newArr = trueArr.map(function (e, index) {
                return `
                <li>
                <input type='checkbox' checked data-id=${index}>
                <p>${e.content}</p>
                <a href='javascript:;' data-id=${index}></a>
                </li>
                `
            })
            document.querySelector(`#donelist`).innerHTML = newArr.join(``)
            //计算数量
            todocount.innerHTML = strArr.length
            donecount.innerHTML = newArr.length

            //渲染的时候存储数据
            localStorage.setItem(`str`, JSON.stringify(falseArr))
            localStorage.setItem(`new`, JSON.stringify(trueArr))

        }
        render()

        // 功能2. 回车发布功能（最新的在最上面）
        //获取到添加功能
        const title = document.querySelector(`#title`)

        title.addEventListener(`keyup`, function (e) {
            //在点击Enter这个键的情况下，那么输入的内容会在done.false里面的最前面一行显示出来，unshift
            if (e.key === `Enter`) {
                if (title.value.trim() === ``) return alert(`内容不能为空`)
                falseArr.unshift({ content: `${title.value}`, down: false })
                title.value = ``
            }
            render()

        })


        // 功能3. 删除操作
        //一个是todoList的删除，一个是donelist的删除
        todoList.addEventListener(`click`, function (e) {
            if (e.target.tagName === `A`) {
                //console.log(e.target.dataset.id)
                falseArr.splice(e.target.dataset.id, 1)
                render()
            }

            // 功能4. 切换任务的完成状态

            //获取到strArr上面的输入功能

            const id = e.target.dataset.id
            if (e.target.tagName === `INPUT`) {
                falseArr[id].done= true
                trueArr.unshift(falseArr[id])
                falseArr.splice(id, 1)
                render()
            }

           
        })





        donelist.addEventListener(`click`, function (e) {
            if (e.target.tagName === `A`) {
                // console.log(e.target.dataset.id)
                trueArr.splice(e.target.dataset.id, 1)
                render()
            }
            const id = e.target.dataset.id
            if (e.target.tagName === `INPUT`) {
                trueArr[id].done = false
                falseArr.unshift(trueArr[id])
                trueArr.splice(id, 1)
                render()
            }

           
        })



    </script>
</body>

</html>